<template>
	<view class="container">
		<view class="form-box">
			<view class="form-item">
				<view class="label">
					反馈分类
				</view>
				<view class="form-item-con radio">
					<view class="radio" v-for="(item,i) in backClassify" :key="item.id" :class="form.reason==item.id ? 'select' : ''" @click="selectRadio(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			
		
			<view class="form-item">
				<view class="label">
					反馈问题
				</view>
				<view class="form-item-con textarea">
					<view class="textarae-box">
						<textarea v-model="form.content" placeholder="请输入反馈的问题"></textarea>
						<text>0/500</text>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					问题图片
				</view>
				<view class="form-item-con upload">
					<view class="upload-box">
						<view class="image" v-for="(item,i) in image" :key="i">
							<image :src="$img_base_url(item)" mode="aspectFill"></image>
							<image class="del" @click="delImg(i)" src="@/static/icon_5_imgclose.png" mode="widthFix"></image>
						</view>
						<image :src="$img_path('/pagesMine/59.png')" @click="upload" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
			<view class="form-item">
				<view class="label">
					联系姓名
				</view>
				<view class="form-item-con input">
					<view class="input-box">
						<input type="text" v-model="form.name" placeholder="请输入姓名" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					联系电话
				</view>
				<view class="form-item-con input">
					<view class="input-box">
						<input type="number" v-model="form.contact" placeholder="请输入电话" />
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="b-btn">
			<button @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	let FormData = require('@/utils/formdata/index.js')
	import { feedback_reasons, feedback } from '@/utils/api/userApi.js'
	import { upload } from '@/utils/api/public.js';
	export default {
		data() {
			return {
				r_idx:0,
				backClassify:[],
				image:[],
				form:{
					reason:'',
					content:'',
					name:'',
					contact:''
				}
			};
		},
		onShow() {
			this.getList()
		},
		methods:{
			getList(){
				feedback_reasons().then(res=>{
					this.backClassify = res.data
					// this.form.reason = res.data[0].id
					this.$set(this.form,'reason',res.data[0].id)
				})
			},
			
			selectRadio(data){
				// this.form.reason = data.id
				this.$set(this.form,'reason',data.id)
			},
			
			
			upload(){
				uni.chooseImage({
					count:1,
					success:(res)=>{
						let file = res.tempFilePaths[0]
						uni.showLoading({
							title:'上传中...'
						})
						upload({file}).then(res=>{
							uni.hideLoading()
							this.image.push(res.data.url)
						})
					},
					fail:()=>{}
				})
			},
			delImg(i){
				this.image.splice(i,1)
			},
			
			submit(){
				let obj = {
					...this.form,
					images:this.image,
				}
				let formdata = new FormData()
				formdata.append('reason',this.form.reason)
				formdata.append('content',this.form.content)
				formdata.append('name',this.form.name)
				formdata.append('contact',this.form.contact)
				formdata.append('images',this.image)
				
				uni.showLoading({
					title:'提交中...'
				})
				feedback(formdata.getData()).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title:'提交成功',
						icon:"none",
						success: () => {
							this.form = {
								reason:'',
								content:'',
								name:'',
								contact:''
							}
							this.image = []
							uni.navigateBack()
						}
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.container{
	padding: 26rpx 34rpx 0;
	box-sizing: border-box;
	.form-box{
		width: 100%;
		.form-item{
			width: 100%;
			margin-bottom: 20rpx;
			.label{
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				line-height: 45rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 20rpx;
			}
			.form-item-con{
				width: 100%;
				padding-bottom: 20rpx;
				&.radio{
					display: flex;
					align-items: center;
					overflow: hidden;
					width: calc(100% + 18rpx);
					flex-wrap: wrap;
					padding-bottom: 0;
					&>view{
						width: calc(33.33% - 18rpx);
						height: 70rpx;
						background: #F5F5F5;
						border-radius: 35rpx 35rpx 35rpx 35rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 70rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
						margin-right: 18rpx;
						margin-bottom: 26rpx;
						&.select{
							background: #E72A2A;
							color: #FFFFFF;
						}
					}
				}
				&.textarea{
					.textarae-box{
						width: 100%;
						height: 276rpx;
						background: #F5F5F5;
						border-radius: 16rpx;
						padding: 20rpx;
						box-sizing: border-box;
						position: relative;
						textarea{
							width: 100%;
							height: 100%;
						}
						&>text{
							position: absolute;
							right: 20rpx;
							bottom:20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #333333;
							line-height: 37rpx;
							text-align: right;
							font-style: normal;
							text-transform: none;
						}
					}
				}
				
				&.upload{
					.upload-box{
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						margin-bottom: 20rpx;
						.image{
							width: 160rpx;
							height: 160rpx;
							border-radius: 16rpx;
							margin-right: 10rpx;
							margin-top: 10rpx;
							image{
								width: 100%;
								height: 100%;
							}
							position: relative;
							.del{
								position: absolute;
								top: 0;
								right: 0;
								width: 30rpx;
								height: 30rpx;
								transform: translateX(40%) translateY(-40%);
							}
						}
						&>image{
							width: 160rpx;
							height: 160rpx;
							border-radius: 16rpx;
							margin-right: 10rpx;
							margin-top: 10rpx;
						}
					}
				}
				&.input{
					.input-box{
						width: 100%;
						height: 88rpx;
						background: #F5F5F5;
						border-radius: 16rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
						input{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
	
	.b-btn{
		width: 100%;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		// background-color: #ffffff;
		margin-top: 35rpx;
		button{
			width: 100%;
			height: 96rpx;
			background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
			border-radius: 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin: 0;
		}
	}
}
</style>
